<template>
  <div class="searchBar">
    <a-row>
      <a-col :span="20">
        <a-form>
          <a-row>
            <a-col :span="6">
              <template v-for="(value, index) in testDatLaist()" :key="index">
                <div class="searchBar-colbonx">
                  <a-form-item field="name" :label="value.value">
                    <a-input v-if="value.type == 'input'" :v-model="value.value" :placeholder="value.tip" />
                    <a-select :placeholder="value.tip" :v-model="value.value">
                      <a-option v-for="(val, ind) in value.selectData" :key="ind" :value="val.value">{{ val.text }}</a-option>
                    </a-select>
                  </a-form-item>
                </div>
              </template>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
      <a-col class="searchBar-rightDom" :span="4">
        <div>
          <div>
            <a-button type="primary" size="mini">
              <template #icon>
                <IconSearch />
              </template>
              查询
            </a-button>
          </div>
          <div class="searchBar-bar"></div>
          <div>
            <a-button size="mini">
              <template #icon>
                <IconDelete />
              </template>
              清空
            </a-button>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import { IconSearch, IconDelete } from '@arco-design/web-vue/es/icon';
import importComfig from './searchBar';
import { toRefs } from 'vue';
export default {
  components: {
    IconSearch,
    IconDelete,
  },
  setup() {
    const { base, init, testDatLaist } = importComfig();
    init();
    return {
      ...toRefs(base),
      testDatLaist,
    };
  },
};
</script>

<style lang="less" scoped>
.searchBar {
  width: calc(100% - 10px);
  padding: 5px;
  &-bar {
    padding: 5px;
  }
  &-rightDom {
    border-left: 1px solid rgb(234, 234, 234);
    display: flex;
    justify-content: flex-end;
  }
}
</style>
